var cas = document.getElementById("cas"); //获取页面中的画布
var ctx = cas.getContext("2d"); //获取2d画笔
var inp = document.getElementById('inp');//获取提交按钮
var whole = document.getElementById('whole');
var box = document.getElementById('box');//获取列表盒子
var list = document.getElementById('list');//获取列表

const character = ['流绪微梦', '桃蹊柳陌', '温澜潮生', '菽水承欢', '寒木春华'];
const poem = ['白日依山尽', '空山新雨后', '大漠孤烟直', '举头望明月', '泥融飞燕子'];
const pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
const w = 200;
const h = 60;



let str = ""; //保存产生的4个随机字符
let flag = true;

const styleArr = ['FZYaoti', ' STLiti', 'LiSu', 'STXinwei', 'HYXiaoMaiTiJ'];

loadPaint();
listCode(0);//页面一打开就开始获取数据

// 设置随机保证每次重新渲染的随机性
function loadPaint() {
    let idex = rn(1, 5);
    switch (idex) {
        case 1:
            verifyCharacter(); //调用函数保证渲染
            break;
        case 2:
            verifyPoem()//调用函数保证渲染
            break;
        case 3:
            verifyEqual() //调用函数保证渲染
            break;
        case 4:
            verifyPool() //调用函数保证渲染
            break;
    }
}

// 将图片base64转换为File对象，清楚明白的解析图片数据
function dataURLtoFile(dataurl, filename) {
    var xarr = dataurl.split(',');
    var mime = xarr[0].match(/:(.*?);/)[1];//正则表达式切分出文件类型
    var bstr = atob(xarr[1]);//atob函数解码base64编码的字符串数据
    var n = bstr.length;
    var u8arr = new Uint8Array(n);//包含n个元素的无符号整型数组
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, { type: mime })
}

// 点击删除按钮动态删除验证码图片
function btnDelete(btn, name, id) {
    btn.onclick = function () {
        list.innerHTML = null;
        fetch(`/admin/image/${name}`, {
            method: 'delete',
            body: JSON.stringify({ param: id })
        })
            .then(res => res.json())
            .then(res => {
                console.log(res)
                for (let i = 0; i < res.length; i++) {
                    var btn = document.createElement('button');
                    btn.setAttribute('class', 'btn')
                    btn.innerHTML = '删除';
                    var li = document.createElement('li');
                    li.setAttribute('class', 'li')
                    var div = document.createElement('div');
                    div.setAttribute('class', 'div');
                    var img = document.createElement('img');
                    var src = `/admin/images/${res[i].imgname}`;
                    img.src = src;
                    li.appendChild(img)
                    li.appendChild(div)
                    li.appendChild(btn)
                    list.appendChild(li)

                    btnDelete(btn, res[i].imgname, id)
                }
            })
    }
}

// 首先获取后端传来的一批验证码的数据
function listCode(id) {
    console.log(78)
    fetch(`/admin/image/${id}`, {
        method: 'get',
    }).then(res => res.json())
        .then((res) => {
            list.innerHTML = null;
            console.log(res)
            // 动态添加节点显示验证码图片，并进行管理删除
            for (let i = 0; i < res.length; i++) {
                var btn = document.createElement('button');

                btn.setAttribute('class', 'btn')
                btn.innerHTML = '删除';

                var li = document.createElement('li');
                li.setAttribute('class', 'li')
                var img = document.createElement('img');
                var src = `/admin/images/${res[i].imgname}`;

                var div = document.createElement('div');
                div.setAttribute('class', 'div');
                img.src = src;
                li.appendChild(img)
                li.appendChild(div)

                li.appendChild(btn)
                list.appendChild(li)

                btnDelete(btn, res[i].imgname, id)
                // console.log(res[i])
            }
        })

}

//1. 产生随机数的函数
function rn(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

//2. 产生随机色的函数
function rc(min, max) {
    let r = rn(min, max);
    let g = rn(min, max);
    let b = rn(min, max);
    return `rgb(${r},${g},${b})`;
}


// 绘制验证码图片里面的线条和斑点
function paintLineAndDots() {
    // 随机产生10条干扰线,颜色需浅
    for (let i = 0; i < 10; i++) {
        ctx.beginPath(); //重置路径
        ctx.moveTo(rn(0, w), rn(0, h)); //设置线条起点
        ctx.lineTo(rn(0, w), rn(0, h));
        ctx.closePath(); //关闭路径
        ctx.strokeStyle = rc(140, 180);
        ctx.stroke();
    }

    // 随机产生100个干扰小圆点
    for (let i = 0; i < 100; i++) {
        ctx.beginPath();
        ctx.arc(rn(0, w), rn(0, h), 1, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fillStyle = rc(120, 170);
        ctx.fill();
    }

}

//产生验证码内容是字母数字
function verifyPool() {
    console.log(3)

    const pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";

    // 开始绘制，首先填充颜色
    ctx.fillStyle = rc(150, 220);
    ctx.fillRect(0, 0, w, h);

    //绘制文字
    str = ""; //清空str的上一次的内容

    // 验证码图片是字母数字
    for (let i = 0; i < 5; i++) {
        let s = pool[rn(0, pool.length)]; //随机的字符
        let fs = rn(25, 35); //字体大小
        let deg = rn(-30, 30);
        ctx.font = fs + "px  " + styleArr[rn(0, styleArr.length)]; //字体的样式
        ctx.textBaseline = "top"; //绘制文本的基线:以上边线为界
        ctx.fillStyle = rc(50, 100); //设置填充颜色
        ctx.save(); //保存前面对画笔的设置

        ctx.translate(35 * i + 15, 15); //平移坐标系
        ctx.rotate((deg * Math.PI) / 200); //设置文本的偏转角度
        ctx.fillText(s, -2 + 5, -2); //绘制文本
        ctx.restore(); //清除前面画笔的设置,画笔恢复初始装态
        str += s;//答案
    }

    paintLineAndDots()

}

// 产生验证码内容是算式
function verifyEqual() {
    const num = '1234567890';
    const runSign = ['+', '-', '*']

    // 开始绘制，首先填充颜色
    ctx.fillStyle = rc(150, 220);
    ctx.fillRect(0, 0, w, h);

    //绘制文字
    str = ""; //清空str的上一次的内容

    // 验证码图片是运算式
    let s = num[rn(0, num.length)];//生成随机运算数
    let ss = num[rn(0, num.length)];//生成随机运算数
    let symbol = runSign[rn(0, runSign.length)];//生成随机运算符
    for (let i = 0; i < 4; i++) {
        let fs = rn(25, 35); //字体大小
        let deg = rn(-30, 30);
        ctx.font = fs + "px  " + styleArr[rn(0, styleArr.length)]; //字体的样式
        ctx.textBaseline = "top"; //绘制文本的基线:以上边线为界
        ctx.fillStyle = rc(50, 100); //设置填充颜色
        ctx.save(); //保存前面对画笔的设置

        ctx.translate(40 * i + 15, 15); //平移坐标系
        ctx.rotate((deg * Math.PI) / 200); //设置文本的偏转角度
        let equal = s + symbol + ss
        str = eval(equal)//str是运算式的答案
        if (i == 0) {
            ctx.fillText(s, -2 + 5, -2); //绘制文本
        } else if (i == 1) {
            ctx.fillText(symbol, -2 + 5, -2); //绘制文本
        } else if (i == 2) {
            ctx.fillText(ss, -2 + 5, -2); //绘制文本
        } else {
            ctx.fillText('=', -2 + 5, -2); //绘制文本
        }
        ctx.restore();
    }
    paintLineAndDots()


}

// 产生验证码是诗词
function verifyPoem() {
    const poem = ['白日依山尽', '空山新雨后', '大漠孤烟直', '举头望明月', '泥融飞燕子'];
    const answerPoem = ['黄河入海流', '天气晚来秋', '黄河落日圆', '低头思故乡', '沙暖睡鸳鸯'];

    // 开始绘制，首先填充颜色
    ctx.fillStyle = rc(150, 220);
    ctx.fillRect(0, 0, w, h);

    //绘制文字
    str = ""; //清空str的上一次的内容

    let index = rn(0, poem.length)
    let s = poem[index]; //随机poem中的一项

    for (let i = 0; i < s.length; i++) {
        let ss = s[i];
        let fs = rn(25, 35); //字体大小
        let deg = rn(-30, 30);
        ctx.font = fs + "px  " + styleArr[rn(0, styleArr.length)]; //字体的样式
        ctx.textBaseline = "top"; //绘制文本的基线:以上边线为界
        ctx.fillStyle = rc(50, 100); //设置填充颜色
        ctx.save(); //保存前面对画笔的设置
        ctx.translate(36 * i + 15, 15); //平移坐标系
        ctx.rotate((deg * Math.PI) / 200); //设置文本的偏转角度
        ctx.fillText(ss, -2 + 5, -2); //绘制文本
        ctx.restore(); //清除前面画笔的设置,画笔恢复初始装态
    }
    str = answerPoem[index];//答案

    paintLineAndDots()

}

// 产生验证码是成语
function verifyCharacter() {
    const character = ['流绪微梦', '桃蹊柳陌', '温澜潮生', '菽水承欢', '寒木春华'];

    // 开始绘制，首先填充颜色
    ctx.fillStyle = rc(150, 220);
    ctx.fillRect(0, 0, w, h);

    //绘制文字
    str = ""; //清空str的上一次的内容

    let index = rn(0, character.length)
    let s = character[index]; //随机character中的一项

    let r = rn(0, s.length);
    // 验证码图片是成语，答案选取红色字体
    for (let i = 0; i < s.length; i++) {
        let ss = s[i];
        let fs = rn(25, 35); //字体大小
        let deg = rn(-30, 30);
        ctx.font = fs + "px  " + styleArr[rn(0, styleArr.length)]; //字体的样式
        ctx.textBaseline = "top"; //绘制文本的基线:以上边线为界
        if (i == r) {
            ctx.fillStyle = 'rgb(255,0,0)'
            str += ss;//答案
        } else {
            ctx.fillStyle = rc(50, 100); //设置填充颜色
        }
        ctx.save(); //保存前面对画笔的设置
        ctx.translate(40 * i + 15, 15); //平移坐标系
        ctx.rotate((deg * Math.PI) / 200); //设置文本的偏转角度
        ctx.fillText(ss, -2 + 5, -2); //绘制文本
        ctx.restore(); //清除前面画笔的设置,画笔恢复初始装态
    }

    paintLineAndDots()

}

